<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>文件上传</title>
<script>
    var totalFileLength, totalUploaded, fileCount, filesUploaded;

    function debug(s) {
        var debug = document.getElementById('debug');
        if (debug) {
            debug.innerHTML = debug.innerHTML + '<br/>' + s;
        }
    }

    function onUploadComplete(e) {
        totalUploaded += document.getElementById('files').
                files[filesUploaded].size;
        filesUploaded++;
        debug('complete ' + filesUploaded + " of " + fileCount);
        debug('totalUploaded: ' + totalUploaded);        
        if (filesUploaded < fileCount) {
            uploadNext();
        } else {
            var bar = document.getElementById('bar');
            bar.style.width = '100%';
            //bar.innerHTML = '100% complete';
            bar.innerHTML = '100% complete' + filesUploaded + " of " + fileCount;
            alert('Finished uploading file(s)');
        }
    }
    
    function onFileSelect(e) {
        var files = e.target.files; // FileList object
        var output = [];
        fileCount = files.length;
        totalFileLength = 0;
        for (var i=0; i<fileCount; i++) {
            var file = files[i];
            var fsize = file.size;
            if(fsize<1024){
            	fsize = num.toFixed(1)+"byte";
            }
            //Kb
            if(fsize >= 1024 && fsize < 1024*1024){	
            	var num = new Number(fsize/1024);
            	fsize = num.toFixed(1)+"Kb";
            	
            }
            //Mb
            if(fsize >= 1024*1024 && fsize < 1024*1024*1024){
            	var num = new Number(fsize/(1024*1024));
            	fsize = num.toFixed(1)+"Mb";
            }
            //Gb
            if(fsize>1024*1024*1024){
            	var num = new Number(fsize/(1024*1024*1024));
            	fsize = num.toFixed(1)+"Gb";
            }
            output.push(file.name, ' (',
            		fsize, ' , ',
                  file.lastModifiedDate.toLocaleDateString(), ')'
            );
            output.push('<br/>');
            debug('add ' + file.size);
            totalFileLength += file.size;
        }
        document.getElementById('selectedFiles').innerHTML = 
            output.join('');
        debug('totalFileLength:' + totalFileLength);
    }

    function onUploadProgress(e) {
        if (e.lengthComputable) {
            var percentComplete = parseInt(
                    (e.loaded + totalUploaded) * 100 
                    / totalFileLength);
            var bar = document.getElementById('bar');
            bar.style.width = percentComplete + '%';
            bar.innerHTML = percentComplete + ' % complete';
        } else {
            debug('unable to compute');
        }
    }

    function onUploadFailed(e) {
        alert("Error uploading file");
    }
    
    function uploadNext() {
        var xhr = new XMLHttpRequest();
        var fd = new FormData();
        var file = document.getElementById('files').
                files[filesUploaded];
        fd.append("multipartFile", file);
        xhr.upload.addEventListener(
                "progress", onUploadProgress, false);
        xhr.addEventListener("load", onUploadComplete, false);
        xhr.addEventListener("error", onUploadFailed, false);
        xhr.open("POST", "/uploadFiles");
        debug('uploading ' + file.name);
        xhr.send(fd);
    }

    function startUpload() {
        totalUploaded = filesUploaded = 0;
        uploadNext();
    }
    window.onload = function() {
        document.getElementById('files').addEventListener(
                'change', onFileSelect, false);
        document.getElementById('uploadButton').
                addEventListener('click', startUpload, false);
    }
</script>
</head>
<body>
<h2><a href="/xz">进入文件下载</a></h2>
<br/>
<h4>操作说明：</h4>
<h4>1.点击选文件</h4>
<h4>2.选择文件，手机默认浏览器支持文件多选，其他浏览器或只能选择一个文件</h4>
<h4>3.点击上传</h4>

<div id='progressBar' style='height:20px;border:2px solid green'>
    <div id='bar' 
            style='height:100%;background:#33dd33;width:0%'>
    </div>
</div>
<form style="">
    <input type="file" id="files" name="files" multiple/>
    <br/>
    <output id="selectedFiles"></output>
    <input style="margin-top:1rem" id="uploadButton" type="button" value="上传"/>
</form>
<!-- <div id='debug' 
    style='height:100px;border:2px solid green;overflow:auto'>
</div> -->
</body>
</html>